<template>
    <div class="shoper">
        <van-nav-bar title="沿街商铺" :border="false" />
        <!-- 消息 -->
        <div class="notice-box">
            <div class="left-box">
                <div class="title">您有一条新的订单动态</div>
                <div class="detail">干垃圾车预计5分钟后到达</div>
            </div>
            <div class="right-box">
                <div class="more-btn" @click="goToNotice">更多</div>
            </div>
        </div>
        <!-- tab切换 -->
        <div class="tab-box">
            <van-tabs animated>
                <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
                    <component :is="item.comp" :shopInfo="shoperInfo" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue"
import baseInfo from "./components/baseInfo.vue";
import appointment from "./components/appointment.vue";
import colletionStatus from "./components/colletionStatus.vue";
const router = useRouter()
const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};
const tabList = reactive([
    {
        id: 1,
        name: '基本信息',
        comp: baseInfo
    },
    {
        id: 2,
        name: '收运状态',
        comp: colletionStatus
    },
    {
        id: 3,
        name: '预约清运',
        comp: appointment
    }
])

const shoperInfo = reactive({
    name: '万顺私宴',
    address: '上海闵行区虹桥镇万源路2758号',
    contacts: '某某',
    method: 1,
    rubbishType: ['干垃圾', '湿垃圾', '餐厨垃圾'],
    time: '上午（7：00 - 7：15）',
    point: "123"
})


function goToNotice() {
    // showPicker.value = true
    router.push({
        path: '/shoper/notice'
    })
}
</script>

<style lang="scss" scoped>
::v-deep(.van-tab) {
    font-size: 30px;
}

::v-deep(.van-tabs__line) {
    width: 44px;
    height: 8px;
    opacity: 1;
    border-radius: 10px;
    background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
}

.shoper {
    background: #fff;

    .notice-box {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 702px;
        height: 114px;
        padding: 16px 40px 16px 48px;
        box-sizing: border-box;
        opacity: 1;
        border-radius: 20px;
        background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 0%, rgba(72, 198, 239, 0.25) 100%);
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 5px 2px rgba(179, 217, 255, 0.25);
        .left-box {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                font-size: 23px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
            }

            .detail {
                font-size: 24px;
                color: rgba(152, 162, 179, 1);
            }
        }

        .left-box::before {
            position: absolute;
            top: 12px;
            left: -14px;
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 64, 96, 1);

        }

        .right-box {
            display: flex;
            align-items: center;

            .more-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 96px;
                height: 48px;
                opacity: 1;
                border-radius: 50px;
                background: rgba(217, 241, 255, 1);
                font-size: 24px;
                color: rgba(0, 160, 252, 1);
                border: 1px solid rgba(0, 160, 252, 1);
            }
        }
    }

    .tab-box {
        margin-top: 20px;
    }
}
</style>